<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加站点</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .form-container {
            width: 600px;
            margin: 0 auto;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input, button {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            background-color: #3498db;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #2980b9;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            border-radius: 8px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: black;
        }

        .directory-list {
            height: 400px;
            overflow: auto;
            list-style: none;
            padding: 0;
        }

        .directory-item {
            padding: 10px;
            cursor: pointer;
            border: 1px solid #ddd;
            margin-bottom: 5px;
            background-color: #f9f9f9;
        }

        .directory-item:hover {
            background-color: #f1f1f1;
        }

        .modal-actions {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }

        .modal-actions button {
            padding: 10px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal-actions button:first-child {
            background-color: #3498db;
            color: #fff;
        }

        .modal-actions button:last-child {
            background-color: #e74c3c;
            color: #fff;
        }
        a{
            color: black;
            text-decoration: none;
        }
        a:hover{
            color: #4CAF50;
            border-bottom: 1px solid #3498db;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h2>添加站点</h2>
    <form id="addSiteForm" action="/saveConfigFile" method="POST">
        <div class="form-group">
            <label for="directory">站点目录</label>
            <input type="text" id="directory" name="filePath" placeholder="请选择目录" readonly>
            <button type="button" onclick="openModal()">选择目录</button>
        </div>
        <div class="form-group">
            <label for="siteName">站点名称</label>
            <input type="text" id="siteName" name="name" placeholder="请输入站点名称" required>
        </div>
        <div class="form-group">
            <label for="note">站点备注</label>
            <input type="text" id="note" name="note" placeholder="备注">
        </div>

        <button type="submit">保存站点并重启 Nginx</button>
    </form>
</div>

<!-- 模态框 -->
<div id="directoryModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>选择一个目录</h2>
        <div>
            <a th:each="f :${paths}" th:href="${'/sitedir?path='+f.path}"  th:text="${f.name}"></a>
        </div>
        <ul class="directory-list">
            <li  th:each="dir :${nginxListDir}"  class="directory-item"   th:data="${path=='/'?'/'+dir:path+'/'+dir}" th:data1="${path}" onclick="setSelectedDirectory(event,this.getAttribute('data'),this.getAttribute('data1'))" ><a  th:dataa="${path=='/'?'/'+dir:path+'/'+dir}" onclick="fetchDir(event,this.getAttribute('dataa'))" th:text="${dir}"></a></li>
        </ul>
        <div class="modal-actions">
            <button onclick="confirmDirectory()">确定</button>
            <button onclick="closeModal()">取消</button>
        </div>
    </div>
</div>

<script>
    if(window.location.href.indexOf("path")!=-1){
        document.getElementById('directoryModal').style.display = 'block';
    }
    let selectedDirectory = '';
    async function fetchDir(event,directory){
        event.stopPropagation();
        event.preventDefault();
        let eDirectory=encodeURIComponent(directory);
        let res=await fetch(`/isDir?path=${eDirectory}`).then(response => response.json())
        if(res.code==200){
            window.location.href=`/sitedir?path=${directory}`
        }else {
            alert('这不是一个目录！');
        }

    }
    // 设置选中的目录
    async function setSelectedDirectory(event,directory,path) {
        let eDirectory=encodeURIComponent(directory);
        let res=await fetch(`/isDir?path=${eDirectory}`).then(response => response.json())
        if(res.code==200){
            selectedDirectory = directory;
            document.querySelectorAll('.directory-item').forEach(item => {
                item.style.backgroundColor = ''; // 清除其他选中项的背景色
            });
            const selectedItem = Array.from(document.querySelectorAll('.directory-item')).find(
                item => path+'/'+item.textContent === directory
            );
            if (selectedItem) {
                selectedItem.style.backgroundColor = '#d3f8d3';






































































































































































































































                // 高亮选中项
            }
        }else {
            alert('这不是一个目录！');
        }

    }

    // 确认目录选择
    function confirmDirectory() {
        if (selectedDirectory) {
            document.getElementById('directory').value = selectedDirectory;
            closeModal();
        } else {
            alert('请选择一个目录！');
        }
    }

    // 打开模态框
    function openModal() {
        document.getElementById('directoryModal').style.display = 'block';
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('directoryModal').style.display = 'none';
        selectedDirectory = ''; // 重置选择
    }

    // 提交表单
    // document.getElementById('addSiteForm').onsubmit = function (event) {
    //     event.preventDefault();
    //     const formData = new FormData(this);
    //     fetch('/api/add-site', {
    //         method: 'POST',
    //         body: formData,
    //     })
    //         .then(response => response.json())
    //         .then(data => alert(data.message))
    //         .catch(error => alert("发生错误：" + error));
    // };
</script>
</body>
</html>
